<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

        <ui5-card>
            <ui5-card-header slot="header" title-text="Donna Maria Moore" subtitle-text="Senior Sales Executive">
                <img src="../assets/images/avatars/man_avatar_1.png" slot="avatar">
            </ui5-card-header>
            <div class="content content-padding">
                <ui5-title level="H5" style="padding-block-end: 1rem;">Contact details</ui5-title>
                <div class="content-group">
                    <ui5-label show-colon>Company Name</ui5-label>
                    <ui5-text>Company A</ui5-text>
                </div>
                <div class="content-group">
                    <ui5-label show-colon>Address</ui5-label>
                    <ui5-text>481 West Street, Anytown 45066, USA</ui5-text>
                </div>
                <div class="content-group">
                    <ui5-label show-colon>Website</ui5-label>
                    <ui5-link target="_blank">www.company_a.example.com</ui5-link>
                </div>
            </div>
        </ui5-card>

    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
